<template>
	<u-picker :show="isShow" ref="ssqPicker" :columns="columns" keyName="label" closeOnClickOverlay :immediateChange ="true"
	 @confirm="confirm" @change="changeHandler"  @close="doclose" @cancel="doclose"></u-picker>
</template>

<script>
	import ssqData from '@/common/json/city-data-level3.json'
	export default {
		name:"base-ssq",
		props: {
			value: {
			    type: String,
			    default: '',
			    required: true
			},
		},
		emits: ['input', 'success'],
		model: {
		    prop: 'value', // 默认是value
		    event: 'input', // 默认是input
		},
		data() {
			return {
				isShow: false,
				columns: [
					[],
					[],
					[],
				]
			};
		},

		async mounted() {
			let columns = [
				[],
				[],
				[]
			]
			this.columns[0] = ssqData;
			this.columns[1] = ssqData[0]['children'];
			this.columns[2] = ssqData[0]['children'][0]['children'];
		
			const picker = this.$refs.ssqPicker
			picker.setColumns(this.columns)
		
		
		},
		methods: {
			changeHandler(e) { //debugger;
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.ssqPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columns[0][index]['children'])
					picker.setColumnValues(2, this.columns[0][index]['children'][0]['children'])
				}
				if (columnIndex === 1) {
					picker.setColumnValues(2, values[columnIndex][index]['children'])
				}
			},
			open(){
				this.isShow = true;
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.isShow = false;
				this.$nextTick(() => {
				    this.$emit("input", e.value[0].label + '-' + e.value[1].label + '-' + e.value[2].label);
					this.$emit("success")
				});

			},
			doclose(){
				this.isShow = false;
			}

		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>
